Transitions with Plotly.react #3217

etpinard · 2018-11-05T23:03:40Z

resolves #1849 (hopefully).

Transitions (don't call them animations) are coming to Plotly.react 🎉

In this iteration, I opted for a single transition option container. For example,

var transition = {
   duration: 2000,
   easing: 'cubic-in-out'
}

var data = [{y: [1,2,1], marker: {size: 20}}]

var layout = {
  xaxis: {range: [-1, 3]},
  yaxis: {range: [0, 3]},
  transition: transition
}

Plotly.newPlot(gd, data, layout)

data[0].y = [2, 1, 2]
data[0].marker.size = 40
data[0].marker.color = 'red'
Plotly.react(gd, data, layout)

gives:

which appears a lot smoother in reality than in that gif.

Here are more examples (taken from https://plot.ly/javascript/animations/ but converted to using Plotly.react):

Trace coordinate transitions: https://codepen.io/etpinard/pen/KrpMQa
Axis range transitions: https://codepen.io/etpinard/pen/wQazrq?editors=1010
Trace transition with object constancy: https://codepen.io/etpinard/pen/XybjZG?editors=1010

In brief to get transitions working with Plotly.react, this PR:

added anim: true to animatable attributes and picked them off during react diffing
added a version of Plots.transition that assumes that gd._fullData / gd._fullLayout is the "new" state (N.B. Plotly.animate assumes that gd._fullData / gd_fullLayout is the "old" state)
make that new Plots.transition figure out if redraw after completion is required from restyle / relayout flags
track axes with autorange:true and altered ranges during react diffing to efficiently compute "layout" transitions
diff fullLayout before fullData to track animatable datarevision changes

TODO:

get general approval from react-plotly.js and dash folks
+ [ ] @nicolaskruchten
+ [ ] @chriddyp
+ [ ] @alexcjohnson
add tests
DRY up Plotly.transition <--> Plotly.transition2 done in: 1ed4e42

cc @plotly/plotly_js

... which will be used to set transition options during Plotly.react updates.

- to (in next commit) efficiently compute axis range transitions - potentially target axis range react update (like we currently do in relayout)

- temporarily add Plots.transitions2 & Cartesian.transitionAxes2 - call Plots.transition2 from Plotly.react when at one animatable attribute has changed AND 'layout.transition` is set by user - 'redraw' after transition iff not all changed attributer are animatable - handle simultaneous trace + layout updates the same way as Plotly.animate - special handling for 'datarevision' diff'ing

nicolaskruchten · 2018-11-05T23:27:11Z

(don't call them animations)

Yes! Super-agree :)

chriddyp · 2018-11-05T23:38:20Z

awesome! is there a prerelease build (on a cdn?) that I can try this out on? I recall that we were creating builds on commits now

antoinerg · 2018-11-05T23:45:11Z

@chriddyp https://17875-45646037-gh.circle-artifacts.com/0/plotly.min.js

To find the link:

Click on "Details" for the publish step
Click on "Show URLs to build files"

chriddyp · 2018-11-05T23:54:13Z

In Dash-land, for larger features like this, we usually create pre-releases and share them with the community for a couple of weeks to get feedback. If OK with plotly.js, I'd like to do the same with this PR. I will manage the community and I'll create a pre-release in dash-core-components from this PR.

I'm frequently surprised by what folks end up doing with abstract features like this and it's a nice, low-risk way to test the waters.

etpinard · 2018-11-06T14:32:23Z

If OK with plotly.js

If dash users are made aware of the limitations, mainly:

plotly.js/src/plots/plots.js

Lines 2547 to 2549 in 1cb0d5f

    
           // Here handle the exception that we refuse to animate traces and axes at the same 
        
           // time. In other words, if there's an axis transition, then set the data transition 
        
           // to instantaneous.

then yeah I'm ok with it.

etpinard · 2018-11-08T17:11:06Z

Update from today's meeting: I'll attempt to add a flag that makes trace transitions "win out" over layout transitions.

nicolaskruchten · 2018-11-20T03:27:21Z

If the major use of this is object-constancy (as I believe, although I'm open to other beliefs!) then I'm pretty sure we need to provide a mechanism for the developer to identify the 'objects' that deserve 'constancy'. For example if I have traces A, B and C in one state and I transition to another state with just B and C I would expect A to vanish and B and C to stay, not A to transition to B, B to C and C to vanish, as they might if we used position as a key (is that what we're currently doing?).

Should we do this by letting the user specify uid or do we create a new transitionkey or objectid or something?

etpinard · 2018-11-20T03:33:44Z

If the major use of this is object-constancy

Part of the examples I made ⬆️ https://codepen.io/etpinard/pen/XybjZG?editors=1010

nicolaskruchten · 2018-11-20T03:40:17Z

Ah the ids key ok. But what about trace-to-trace constancy?

nicolaskruchten · 2018-11-20T03:53:47Z

Here's an example: https://codepen.io/nicolaskruchten/pen/pQddZm?editors=0010

In this case I would expect the red trace to vanish and the blue trace to translate to where the red one used to be, but I don't think I can express that right now.

etpinard · 2018-11-20T03:56:53Z

uid should be enough in this case. No need for another attribute.

nicolaskruchten · 2018-11-20T03:58:58Z

OK, so we should evolve this PR a bit to only transition matching-uid-traces? @chriddyp you're OK with requiring uid for transitioning to work? I think we have to, otherwise we just encourage gratuitous transitions and/or miss some important ones...

alexcjohnson · 2018-11-20T04:20:01Z

Presumably this will work the same way as uirevision #3236 - if you don't provide uid, we assign one that's random at first but stays with traces of the same index. That machinery is nothing new. So internally we only need to key off uid, but to the user it looks like "uid if you provide that, index if you don't"

nicolaskruchten · 2018-11-20T14:01:07Z

I could live with that. We still need to make my example work tho right? Or did I do it wrong?

…

On Mon, Nov 19, 2018 at 23:20 alexcjohnson ***@***.***> wrote: Presumably this will work the same way as uirevision #3236 <#3236> - if you don't provide uid, we assign one that's random at first but stays with traces of the same index. That machinery is nothing new. So internally we only need to key off uid, but to the user it looks like "uid if you provide that, index if you don't" — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3217 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAMbA1VfVtG1KByHXMFLmsr9ZGegIx5Oks5uw4L4gaJpZM4YPboB> .

etpinard · 2018-11-20T14:47:17Z

Transitions from .animate and .react don't support trace-in / trace-out tweening at the moment.

nicolaskruchten · 2018-11-20T14:57:01Z

(per verbal conversation: I'm not talking about tweening in/out but rather trace-constancy)

etpinard · 2018-11-20T15:02:28Z

yeah, getting https://codepen.io/nicolaskruchten/pen/pQddZm?editors=0010 to work shouldn't be too hard. I suspect something is up in the react diffing.

https://codepen.io/etpinard/pen/yQpNLM?editors=0010 works ok when the before and after "data" have the same number of traces and the same trace ordering.

nicolaskruchten · 2018-11-20T15:24:50Z

Just so we don't forget: animations should track uid regardless of the order of the traces in subsequent react() calls, which isn't the case right now: https://codepen.io/nicolaskruchten/pen/yQpNWE?editors=0010

- making uid anim:true and allowing uid to be numbers was enough to fix this case.

- should still go through calc (and hence a redraw after the transition) but Scatter.plot can handle this case fine.

etpinard · 2019-01-10T22:25:06Z

Update: the trace "object-constancy" bugs are now fixed:

data-length mismatch case: https://codepen.io/etpinard/pen/QzZdKN?editors=0010
out-of-order case: https://codepen.io/etpinard/pen/jXeyMr?editors=0010

not much extra logic was needed (see commits 4ef048f, 61ee4e9 and 33a9530 for the details), d3's and the key function in this block here:

plotly.js/src/traces/scatter/plot.js

Lines 36 to 37 in 05d0759

    
           join = scatterLayer.selectAll('g.trace') 
        
               .data(cdscatterSorted, function(d) { return d[0].trace.uid; });

did the rest.

nicolaskruchten · 2019-01-11T17:14:34Z

@chriddyp can you elaborate on your comment on "transition revision" before we merge this guy in?

... but make sure to count traces deletion as a "non-animatable" change (to make data-mismatch test still passes).

- to DRY up pan/scroll and axes transition (next commit) annotations/shapes/images redraw calls. - add ax._imgIndices stash (similar to _annIndices/_shapeIndices), to make redrawComponents loop just once over the axis list.

- Plots.transition2 becomes Plots.transitionFromReact - Plots.transition and Plots.transitionFromReact are now simple wrappers around a more general _transition() internal method - transitionAxes2 is now merged into transitionAxes, the "find which axis to edit" logic in now in Plots.transition - transitionAxes now uses Axes.redrawComponents and support xa-only and ya-only edits (new react+transition tests were adapted for this)

- with values 'layout first' and 'traces first' which determines whether the figure's layout OR traces are smoothly transitions during Plotly.react calls that generate a data AND layout diff.

etpinard · 2019-01-14T23:04:29Z

Update from today's meeting: I'll attempt to add a flag that makes trace transitions "win out" over layout transitions.

Done in 8ab38be via transition.ordering: 'trace first'. I'm not 100% sold on that attribute name though. Please let me know if you can think of a better name for it.

Example: https://codepen.io/etpinard/pen/jXdLgG

With that ⬆️ , I'll tag this PR as reviewable.

nicolaskruchten · 2019-01-15T03:03:46Z

So... if I delete the "traces first" line, it seems to move and pan simultaneously, which is the ideal, right? I thought that wasn't possible somehow?

etpinard · 2019-01-15T03:20:13Z

it seems to move and pan simultaneously, which is the ideal, right? I thought that wasn't possible somehow?

That's way layout transitions (like https://plot.ly/javascript/animations/#animating-the-layout) always do.

etpinard · 2019-01-15T03:21:36Z

... you can't animate marker color/width during those layout transitions at the moment though.

nicolaskruchten · 2019-01-15T03:32:16Z

Ah I see, the blue/black transition was so subtle I missed it. Adding a size transition as well makes it clearer what the tradeoff is.

etpinard · 2019-01-16T19:48:31Z

@archmoj is going to review this one.

archmoj

@etpinard Great work!
Please find my questions below.
Thanks.

src/plot_api/plot_api.js

src/plots/cartesian/transition_axes.js

src/plots/plots.js

src/plot_api/plot_api.js

archmoj · 2019-01-22T03:27:38Z

Wonderful feature!
💃 🕺
🕺 💃

Kindly move forward and merge it, possibly after figuring out why one test started to fail on master:
https://circleci.com/gh/plotly/plotly.js/24314

etpinard · 2019-01-22T12:46:00Z

Thanks for the review. I think the failing test is due to the joyplot PR and the boxpoint hover fix not getting along. I'll fix that later this morning. Nothing to worry!

etpinard added 5 commits November 5, 2018 18:02

add anim:true info to valObjects of animatable scatter attributes

0d34b05

add anim:true to cartesian axis range attribute declarations

1087b8e

add layout.transition attribute

78c3840

... which will be used to set transition options during Plotly.react updates.

track axes w/ autorange:true / altered ranges during react diffing

5010de0

- to (in next commit) efficiently compute axis range transitions - potentially target axis range react update (like we currently do in relayout)

etpinard added type: feature status: has TODOs labels Nov 5, 2018

etpinard added this to the v1.43.0 milestone Nov 5, 2018

etpinard added 3 commits November 7, 2018 16:40

fixup react 'anim' flag logic

209d7b4

no need to call _module.plot during layout-only transitions

472d0d1

add react+transitions tests

badfeda

chriddyp mentioned this pull request Nov 8, 2018

transitions prerelease plotly/dash-core-components#374

Closed

etpinard added 3 commits January 10, 2019 16:56

make trace uid an anim:true attr + improve description

61ee4e9

add test for trace object-constancy out-of-order case

73284f4

- making uid anim:true and allowing uid to be numbers was enough to fix this case.

allow react-transition to diff when old/new fullData lengths mismatch

33a9530

- should still go through calc (and hence a redraw after the transition) but Scatter.plot can handle this case fine.

etpinard added 4 commits January 14, 2019 17:20

don't count editType:'none' edits as "changes",

fd121f4

... but make sure to count traces deletion as a "non-animatable" change (to make data-mismatch test still passes).

add Axes.redrawComponents

eb7ba35

- to DRY up pan/scroll and axes transition (next commit) annotations/shapes/images redraw calls. - add ax._imgIndices stash (similar to _annIndices/_shapeIndices), to make redrawComponents loop just once over the axis list.

add transition.ordering attr

8ab38be

- with values 'layout first' and 'traces first' which determines whether the figure's layout OR traces are smoothly transitions during Plotly.react calls that generate a data AND layout diff.

etpinard added status: reviewable and removed status: has TODOs labels Jan 14, 2019

etpinard requested a review from archmoj January 16, 2019 19:48

Merge branch 'master' into transitions-in-react

057c811

archmoj reviewed Jan 22, 2019

View reviewed changes

src/plot_api/plot_api.js Outdated Show resolved Hide resolved

src/plots/cartesian/transition_axes.js Show resolved Hide resolved

src/plots/plots.js Outdated Show resolved Hide resolved

src/plot_api/plot_api.js Show resolved Hide resolved

src/plot_api/plot_api.js Show resolved Hide resolved

some linting

ec4d8b9

etpinard merged commit c34d299 into master Jan 22, 2019

etpinard deleted the transitions-in-react branch January 22, 2019 12:38

nicolaskruchten mentioned this pull request Jan 22, 2019

More transitions #3456

Open

5 tasks

dmt0 mentioned this pull request Feb 8, 2019

Update animations w/ react-plotly plotly/react-plotly.js#101

Open

billyhunt mentioned this pull request Aug 27, 2019

bar-chart animation on loading plotly/react-plotly.js#51

Open

etpinard mentioned this pull request Oct 7, 2019

Bar transition oddities #4251

Closed

etpinard mentioned this pull request Mar 13, 2020

Animating layout and data simultaneously #1687

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Transitions with Plotly.react #3217

Transitions with Plotly.react #3217

etpinard commented Nov 5, 2018 •

edited

Loading

nicolaskruchten commented Nov 5, 2018

chriddyp commented Nov 5, 2018

antoinerg commented Nov 5, 2018 •

edited

Loading

chriddyp commented Nov 5, 2018

etpinard commented Nov 6, 2018 •

edited

Loading

etpinard commented Nov 8, 2018

nicolaskruchten commented Nov 20, 2018

etpinard commented Nov 20, 2018

nicolaskruchten commented Nov 20, 2018

nicolaskruchten commented Nov 20, 2018

etpinard commented Nov 20, 2018

nicolaskruchten commented Nov 20, 2018

alexcjohnson commented Nov 20, 2018

nicolaskruchten commented Nov 20, 2018 via email

etpinard commented Nov 20, 2018

nicolaskruchten commented Nov 20, 2018

etpinard commented Nov 20, 2018 •

edited

Loading

nicolaskruchten commented Nov 20, 2018

etpinard commented Jan 10, 2019

nicolaskruchten commented Jan 11, 2019

etpinard commented Jan 14, 2019

nicolaskruchten commented Jan 15, 2019

etpinard commented Jan 15, 2019

etpinard commented Jan 15, 2019 •

edited

Loading

nicolaskruchten commented Jan 15, 2019

etpinard commented Jan 16, 2019

archmoj left a comment

archmoj commented Jan 22, 2019

etpinard commented Jan 22, 2019

Transitions with Plotly.react #3217

Transitions with Plotly.react #3217

Conversation

etpinard commented Nov 5, 2018 • edited Loading

nicolaskruchten commented Nov 5, 2018

chriddyp commented Nov 5, 2018

antoinerg commented Nov 5, 2018 • edited Loading

chriddyp commented Nov 5, 2018

etpinard commented Nov 6, 2018 • edited Loading

etpinard commented Nov 8, 2018

nicolaskruchten commented Nov 20, 2018

etpinard commented Nov 20, 2018

nicolaskruchten commented Nov 20, 2018

nicolaskruchten commented Nov 20, 2018

etpinard commented Nov 20, 2018

nicolaskruchten commented Nov 20, 2018

alexcjohnson commented Nov 20, 2018

nicolaskruchten commented Nov 20, 2018 via email

etpinard commented Nov 20, 2018

nicolaskruchten commented Nov 20, 2018

etpinard commented Nov 20, 2018 • edited Loading

nicolaskruchten commented Nov 20, 2018

etpinard commented Jan 10, 2019

nicolaskruchten commented Jan 11, 2019

etpinard commented Jan 14, 2019

nicolaskruchten commented Jan 15, 2019

etpinard commented Jan 15, 2019

etpinard commented Jan 15, 2019 • edited Loading

nicolaskruchten commented Jan 15, 2019

etpinard commented Jan 16, 2019

archmoj left a comment

Choose a reason for hiding this comment

archmoj commented Jan 22, 2019

etpinard commented Jan 22, 2019

etpinard commented Nov 5, 2018 •

edited

Loading

antoinerg commented Nov 5, 2018 •

edited

Loading

etpinard commented Nov 6, 2018 •

edited

Loading

etpinard commented Nov 20, 2018 •

edited

Loading

etpinard commented Jan 15, 2019 •

edited

Loading